<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Base Sprite</title>
</head>
<body>
  <canvas id="mycanvas" width="600" height="600"></canvas>
  <script src="/js/sprite-core.js"></script>
  <script>
    const Label = spritejs.Label;
    const Layer = spritejs.Layer;
    const Group = spritejs.Group;
    const context = document.getElementById('mycanvas').getContext('2d');
    const layer = new Layer({context, renderMode: 'repaintAll'});

    const img = new Image();
    img.onload = function () {
      // console.log('load')
      const s = new Label('测试');
      s.attr({
        // textures: [img],
        textAlign: 'center',
        lineHeight: 300,
        anchor: 0.5,
        border: [6, 'black'],
        pos: [300, 300],
        size: [300, 300],
        // bgcolor: 'blue',
        bgimage: {
          image: img,
          display: '.9',
          clip9: 64,
          // offset: [0, 50],
        },
        states: {
          beforeEnter: {
            opacity: 0,
            translate: [0, 600],
          },
          afterExit: {
            opacity: 0,
            translate: [0, 600],
          },
          hide: {
            // x: '200%',
            opacity: 0,
          },
          beforeShow: {
            translate: [0, 600],
          },
          a: {
            scale: [0.5, 0.5],
          },
          b: {
            scale: [1.5, 1.5],
          },
          c: {
            scale: [1, 1],
          },
        },
        actions: [
          {
            to: 'a',
            duration: 2000,
          },
          {
            to: 'b',
            duration: 2000,
          },
          {
            from: 'beforeEnter',
            duration: 2000,
          },
          {
            from: 'beforeExit',
            duration: 2000,
          },
          {
            both: 'hide',
            duration: 2000,
          },
        ],
      });

      s.on('state-to-a', () => {
        console.log('state-to-a');
      });

      s.on('state-to-b', () => {
        console.log('state-to-b');
      });

      s.on('state-to-c', () => {
        console.log('state-to-c');
      });

      s.on('state-to-afterExit', () => {
        console.log('exit', s.parent);
      });

      s.on('remove', () => {
        console.log('remove', s.parent);
      });

      const group = new Group();

      group.append(s);
      layer.append(group);

      layer.attr({
        font: '34px "宋体"',
      });
      window.s = s;
      window.g = group;
    };
    img.src = 'https://p2.ssl.qhimg.com/t01c18f4e677c09a87e.jpg';
  </script>
</body>
</html>